import React, { useState, useReducer } from 'react'


const useFrom = initalFields => {
    const forRuducer = (state, action) => {
        const [key, value] = action;
        return {
            ...state,
            [key]: value,
        };
    };

    const [values, dispatch] = useReducer(forRuducer, initalFields)

    const getFieldsProps = key => ({
        value: values[key],
        onChange: event => dispatch({ key, value: event.target.value }),
    });

    return { values, getFieldsProps }

};

export default function HookForm() {
    const [values, setValues] = useState({
        user: '',
        pswd: '',
    });

    const {getFieldsProps}=useFrom({});

    // const ref = useRef();
    console.log(values)
    return (
        <div>
            <input
                placeholder="用户名"
                type="text"
                {...getFieldsProps()}
            />
            <input
                placeholder="密码"
                type="password"
                {...getFieldsProps()}
            />

            <button> Get value</button>




        </div>
    )
}
